<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
</head>

<body>
    <div id="app">
        <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
        </fm-generate-form>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
    <script> new Vue({ el: '#app', data: { jsonData: { "list": [{ "type": "time", "name": "时间选择器", "icon": "icon-time", "options": { "defaultValue": "", "readonly": false, "disabled": false, "editable": true, "clearable": true, "placeholder": "", "startPlaceholder": "", "endPlaceholder": "", "isRange": false, "arrowControl": true, "format": "HH:mm:ss", "required": false, "width": "", "remoteFunc": "func_1558578606000_3625" }, "key": "1558578606000_3625", "model": "time_1558578606000_3625", "rules": [{ "type": "string", "message": "单行文本格式不正确" }] }, { "type": "radio", "name": "单选框组", "icon": "icon-radio-active", "options": { "inline": false, "defaultValue": "", "showLabel": false, "options": [{ "value": "选项1", "label": "选项1" }, { "value": "选项2", "label": "选项2" }, { "value": "选项3", "label": "选项3" }], "required": false, "width": "", "remote": false, "remoteOptions": [], "props": { "value": "value", "label": "label" }, "remoteFunc": "func_1558578608000_69043" }, "key": "1558578608000_69043", "model": "radio_1558578608000_69043", "rules": [{ "type": "string", "message": "单行文本格式不正确" }] }, { "type": "textarea", "name": "多行文本", "icon": "icon-diy-com-textarea", "options": { "width": "100%", "defaultValue": "", "required": false, "disabled": false, "pattern": "", "placeholder": "", "remoteFunc": "func_1558578609000_20056" }, "key": "1558578609000_20056", "model": "textarea_1558578609000_20056", "rules": [{ "type": "string", "message": "单行文本格式不正确" }] }], "config": { "labelWidth": 100, "labelPosition": "top", "size": "small" } }, editData: {}, remoteFuncs: {} }, methods: { handleSubmit() { this.$refs.generateForm.getData().then(data => { // 数据校验成功 // data 为获取的表单数据 }).catch(e => { // 数据校验失败 }) } } }) </script>
</body>

</html>